<div class="w-100 h-100 d-flex flex-column overflow-hidden" xmlns="http://www.w3.org/1999/html">
  <nav class="manager-toolbar navbar bg-panel border-bottom px-2">
    <div class="d-flex flex-row w-100">
      <select class="form-select w-auto" [value]="device?.name" (change)="deviceManager.setDefault(deviceSelect.value)"
              #deviceSelect>
        @for (dev of devices$ | async; track dev.name) {
          <option [ngValue]="dev.name" [selected]="dev.name === device?.name">{{ dev.name }}</option>
        }
      </select>
      <ul ngbNav #nav="ngbNav" class="nav-pills flex-nowrap ms-2" [(activeId)]="tabId">
        <li ngbNavItem="installed">
          <a ngbNavLink>Installed</a>
          <ng-template ngbNavContent>
            <app-installed [device]="device" [installed$]="packages$"></app-installed>
          </ng-template>
        </li>
        <li ngbNavItem="channel">
          <a ngbNavLink>Available</a>
          <ng-template ngbNavContent>
            <app-channel [installed]="instPackages"></app-channel>
          </ng-template>
        </li>
      </ul>
      <button class="btn btn-primary text-nowrap ms-auto" (click)="openInstallChooser()">
        <i class="bi bi-folder-fill me-2"></i>Install
      </button>
    </div>
  </nav>
  <div class="p-3 flex-fill overflow-auto" [ngbNavOutlet]="nav"></div>
  <div class="stat-bar border-top bottom-0 mt-auto d-flex flex-row flex-shrink-0 align-items-center">
    <app-stat-storage-info class="ms-auto me-3 storage-info-bar" [device]="device" #storageInfo></app-stat-storage-info>
  </div>
</div>
